<template>
	<span class="money">
		<span>{{ text.main }}</span>
	</span>
</template>

<script>
export default {
  name: 'Money',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    text() {
      const value = this.value
      if (value.includes('NaN')) {
        return {
          main: value.replace('NaN', '-')
        }
      }
      return {
        main: value
      }
    }
  }
}
</script>
<style scoped>
.money {
	display: inline-flex;
	align-items: baseline;
}
</style>
